Add some tests for radial gradient parsing

These are the examples from the CSS spec.

diff --git a/testsuite/css/parser/Makefile.am b/testsuite/css/parser/Makefile.am
index 3c7106dfe084c5436032beaffedcee31316954a5..4479dddac0683bac799db2e22b663f4e6d8548a1 100644 (file)
--- a/testsuite/css/parser/Makefile.am
+++ b/testsuite/css/parser/Makefile.am
@@ -405,6 +405,8 @@ test_data = \
        pseudo-classes-unknown.css \
        pseudo-classes-unknown.errors \
        pseudo-classes-unknown.ref.css \
+        radial.css \
+        radial.ref.css \
        selector.css \
        selector.ref.css \
        shadow.css \

diff --git a/testsuite/css/parser/radial.css b/testsuite/css/parser/radial.css
new file mode 100644 (file)
index 0000000..1634363
--- /dev/null
+++ b/testsuite/css/parser/radial.css
@@ -0,0 +1,39 @@
+a {
+  background-image: radial-gradient(yellow, green);
+}
+
+b {
+  background-image: radial-gradient(ellipse at center, yellow 0%, green 100%);
+}
+
+c {
+  background-image: radial-gradient(farthest-corner at 50% 50%, yellow, green);
+}
+
+d {
+  background-image: radial-gradient(circle, yellow, green);
+}
+
+e {
+  background-image: radial-gradient(red, yellow, green);
+}
+
+f {
+  background-image: radial-gradient(farthest-side at left bottom, red, yellow 50px, green);
+}
+
+g {
+  background-image: radial-gradient(closest-side at 20px 30px, red, yellow, green);
+}
+
+h {
+  background-image: radial-gradient(20px 30px at 20px 30px, red, yellow, green);
+}
+
+i {
+  background-image: radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
+}
+
+j {
+  background-image: radial-gradient(20px 20px at 20px 30px, red, yellow, green);
+}

diff --git a/testsuite/css/parser/radial.ref.css b/testsuite/css/parser/radial.ref.css
new file mode 100644 (file)
index 0000000..00dcab6
--- /dev/null
+++ b/testsuite/css/parser/radial.ref.css
@@ -0,0 +1,39 @@
+a {
+  background-image: radial-gradient(circle farthest-corner at center, rgb(255,255,0), rgb(0,128,0));
+}
+
+b {
+  background-image: radial-gradient(ellipse farthest-corner at center, rgb(255,255,0) 0, rgb(0,128,0) 100%);
+}
+
+c {
+  background-image: radial-gradient(circle farthest-corner at center, rgb(255,255,0), rgb(0,128,0));
+}
+
+d {
+  background-image: radial-gradient(circle farthest-corner at center, rgb(255,255,0), rgb(0,128,0));
+}
+
+e {
+  background-image: radial-gradient(circle farthest-corner at center, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
+}
+
+f {
+  background-image: radial-gradient(circle farthest-side at left bottom, rgb(255,0,0), rgb(255,255,0) 50px, rgb(0,128,0));
+}
+
+g {
+  background-image: radial-gradient(circle closest-side at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
+}
+
+h {
+  background-image: radial-gradient(ellipse 20px 30px at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
+}
+
+i {
+  background-image: radial-gradient(circle closest-side at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
+}
+
+j {
+  background-image: radial-gradient(ellipse 20px 20px at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
+}